
<script setup>
import { ref, reactive,onBeforeMount,getCurrentInstance,onBeforeUpdate } from 'vue';
import NavigationVue from '../../components/Navigation.vue';
import Footer1 from "../../components/Footer1.vue"
import Liucheng from "../../components/Liucheng.vue"
import SwiperVue from '../langxia/Swiper.vue';
import YoushiVue from '../langxia/Youshi.vue';
// import testVue from '../langxia/Test1.vue';
import img1 from "../langxia/img/1car.jpg"
import img2 from "../langxia/img/2car.jpg"
import img3 from "../langxia/img/3car.jpg"
let imgs = [
  { url: img1 },
  { url: img2 },
  { url: img3 }
]
let hotcar=reactive(["hotcaron","hotcar","hotcar","hotcar","hotcar"])
let hotcar1=reactive(["hotcar1","hotcar2","hotcar3","hotcar4","hotcar5"])
let count=ref(0)
let titlearr = ["轿车", "豪车", "大巴车", "商务车","越野车"]
let chagencar=(digital)=>{
  count.value=digital
  // console.log(count.value,123)
  
// 排他
for(let a =0;a<hotcar.length;a++){
  // console.log(reactive.length,count);
  if(a==digital){
    hotcar[a]="hotcaron"
  }else{
    hotcar[a]="hotcar"

  }
}
}

let msg=ref("")
 let change1=function(index){
	 msg.value=index
 }

// 后端数据

 
	let arr1=reactive([]) //和vue2一样，请求数据时需要提前用一个空数组装
 
	const {proxy} = getCurrentInstance(); //正常使用:语法糖环境默认为setup钩子
  
  	 onBeforeMount( async()=>{
  	 	let res=await proxy.$axios('/Cardetail') //使用公共配置的$axios进行axios请求
  	 	//因为公共路径的配置所以多了一个api1，实际请求的网址为http://127.0.0.1:5137/api1/test
  	 	//此时会进行代理 转变为http://127.0.0.1:7001/test
  	 	 arr1.push(...res.data) //将请求的数据添加到外部的arr1中
		 // console.log(arr1,arr1.length,6666)	
		 
		 //处理图片路径问题
		 let VehicleCarArry=[]
		 let aa=[]
		 let bb=[]
		arr1.forEach((el,index)=>{
				VehicleCarArry[index]=el.VehicleCar.split("---")
				aa[index]=VehicleCarArry[index].join('http://localhost:7001')
				bb[index]=aa[index].split(",")
			    el.img=bb[index]
				

		})
	
  	 })
	 // onBeforeUpdate (async()=>{
	 //     	 if(msg.value==1){
		// 		 while(arr1.length!=0){
		// 			 arr1.pop()
		// 		 }
		// 		 // console.log(arr1,123)
		// 		 let res=await proxy.$axios('/Cardetail') //使用公共配置的$axios进行axios请求
		// 		 //因为公共路径的配置所以多了一个api1，实际请求的网址为http://127.0.0.1:5137/api1/test
		// 		 //此时会进行代理 转变为http://127.0.0.1:7001/test
		// 		  arr1.push(...res.data) //将请求的数据添加到外部的arr1中
		// 		  console.log(arr1,6666)	
				  
		// 		  //处理图片路径问题
		// 		  let VehicleCarArry=[]
		// 		  let aa=[]
		// 		  let bb=[]
		// 		 arr1.forEach((el,index)=>{
		// 		 		VehicleCarArry[index]=el.VehicleCar.split("---")
		// 		 		aa[index]=VehicleCarArry[index].join('http://localhost:7001')
		// 		 		bb[index]=aa[index].split(",")
		// 		 	    el.img=bb[index]
				 		
				 
		// 		 })
		// 	 }
	     	
	 // })
</script>


<template>
  <NavigationVue></NavigationVue>
  <SwiperVue></SwiperVue>
  <!-- <testVue></testVue> -->
  <!-- 轮播图项目小标题 -->
  <div class="index-Head">
    <h2>热门车型大搜罗</h2>
    <div class="hr"></div>
    <p>热门车型，实时更新随看随租，值得您关注</p>
  </div>
  <!-- 热门车型 -->
  <div class="hot_car">
    <a :class="hotcar[index]" :id="hotcar1[index]" @mouseover="chagencar(index)" @click="change1(index)" v-for="(item, index) in titlearr" :key="index">{{item}}</a>
  </div>
  <!-- 车数据 -->
  <div class="carlists">
    <div class="carlist" v-for="el in arr1">
      <router-link :to="{path:'/yj/detail',query:{'id':el.carid}}">
        <img :src="el.img[0]" alt="" />
     </router-link>
      <div class="type1">{{el.carname}}</div>
      <div class="type2">{{el.shift}}&nbsp;|&nbsp;乘坐{{el.peopel}}人</div>
      <div class="type3">￥<span>{{el.price}}</span>元起</div>
    </div>
  </div>
  <span>{{msg}}</span>
  <!-- 优势 -->
  <YoushiVue></YoushiVue>
  <Liucheng></Liucheng>
  <Footer1></Footer1>
</template>
<style scoped lang="scss">
// 轮播图下面小标题
.index-Head {
  margin: 30px 0;
  text-align: center;

  h2 {
    font-size: 30px;
    color: #333333;
    font-weight: normal;
  }

  .hr {
    width: 54px;
    height: 3px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 15px;
    background-color: #db2534;
  }

  p {
    margin-top: 12px;
    font-size: 16px;
    line-height: 22px;
    color: #999999;
  }
}


// 热门车型
.hot_car {
  width: 100%;
  text-align: center;
  height: 44px;
  line-height: 44px;
  margin-bottom: 20px;
  #hotcar5 {
    border-right:1px solid #ccc ;
  }
a {
  display: inline-block;
  width: 118px;
  height: 42px;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #ccc;
  color: #999999;
  cursor: pointer;
    // background-color: #db2534;
}
.hotcaron{
  background-color: #db2534;
  color: #fff;

}
.hotcaron a:last-child{
    background-color: #333333;
  border-right: 1px solid #ccc;
  }
a:hover {
  background-color: #db2534;
  color: #fff;
}
// .last {
//   border-right: 1px solid #ccc;
// }
}


//车表描述
.cartype {
  cursor: default;
  width: 1300px;
  // height: 30px;
  text-align: center;
  font-size: 40px;
  background-color: #fafafa;
  // color: #3ac257;
  margin: 0 auto;
  line-height: 45px;
  .cartype2 {
    font-size: 14px;
    color: #a5a59d;
  }
} //车表
.carlists {
  background-color: #fafafa;
  cursor: default;
  width: 1300px;
  // height: 2000px;
  margin: 0 auto;
  // background-color: #3ac257;
  flex-wrap: wrap;
  display: flex;
  // justify-content: space-between;

  .carlist:hover {
    box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15); /* 鼠标悬浮时盒子出现的阴影 */
    transform: translate(0, -5px); /* 鼠标悬浮时盒子上移10px */
  }
  //单个车box
  .carlist {
    width: 378px;
    // background-color: aliceblue;
    margin-bottom: 20px;
	margin-left: 40px;
    position: relative;
    border: 1px solid #d5d2d2;
    transition: all 0.3s; /* 上浮这个过程需要的时间 */
    a {
      //车img
      img {
        cursor: pointer;
        width: 378px;
        height: 258px;
      }
    } //车辆型号
    .type1 {
      margin-left: 10px;
      margin: 5px;
      font-size: 18px;
    }
    .type2 {
      margin-left: 10px;
      font-size: 14px;
    }
    .type3 {
     width:130px;
     position: absolute;
     top: 280px;
     left: 260px;
     span {
       color: #ff3e1d;
       font-size: 24px;
     }
    }
  }
}
</style>

